<template>
  <div class="bar-component">
    <div :id="id" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    props:{
      id:String,
      data: {
        type: Array,
        default: () => {
          return  []
        }
      }
    },
    data() {
      return {
        myChart:null,
        list:[],
        option: {
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            y: 20,
            data:['当前人数', '离职人数', '入职人数']
          },
          color:['#759AA0','#E69D87','#DD6B66'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0',
            containLabel: true
          },
          xAxis : [
            {
              type : 'value',
              axisTick: {
                alignWithLabel: true,
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: '#e9e9e9',
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#666',
                }
              }
            }
          ],
          yAxis : [
            {
              type : 'category',
              axisTick : {show: false},
              data : ['一月','二月','三月','四月','五月','六月']
            }
          ],
          series : [
            {
              name:'当前人数',
              type:'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data:[320, 302, 341, 374, 390, 450]
            },
            {
              name:'离职人数',
              type:'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'left'
                }
              },
              data:[-120, -132, -101, -134, -190, -230]
            },
            {
              name:'入职人数',
              type:'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true
                }
              },
              data:[200, 170, 240, 244, 200, 220]
            }

          ]
        }
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        let {id} = this;
        this.myChart = echarts.init(document.getElementById(id));
        this.myChart.setOption(this.option);
      },
    },
    watch:{
     /* data: {
        handler(cur, old) {
          cur.map((v, i) =>{
            this.list.push({
              name: v.regionName,
              value: Number(v.value)
            })
          });
          // 设置tooltip 数据
          // 自定义tooltip
          /!*this.option.tooltip.formatter = params => {
            var s = "";
            var myseries = this.list;
            for (var i = 0; i < myseries.length; i++) {
              if (myseries[i].name == params.name) {
                s += myseries[i].name + '</br>' + myseries[i].value1 + '</br>';
              }
            }
            return s;
          };*!/
          this.option.series[0].data=this.list;
          this.option.xAxis[0].data=this.list.map((v, i) =>{
            return {
              value: v.name
            }
          });
          this.myChart.setOption(this.option);
        },
        deep: true,
        immediate: true
      }*/
    }
  };
</script>

<style scoped>
  .bar-component {
    height: 100%;
    width: 100%;
  }
</style>

